@import "./varsty";

/* 公共样式 */
.fl-r {
    float:right;
}
.fl-l {
    float:left;
}
a {
    cursor: pointer;
}

/* 清浮动 */
.clearfix::after {
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
    content:"";
    line-height:0;
}
.fx-weight-border-font {
    font-weight: bolder;
}
.fx-price-font {
    color:$fxPrice;
}
.fx-default-font {
    color:$fxDefaultColor;
}
.fx-warn-font {
    color:$fxRed;
}
.fx-green-font {
    color:$fxGreen;
}

/* 阴影块 */
.fx-shadow-block {
    border:1px solid #eeeeee;
    border-radius:5px;
    box-shadow:2px -2px 5px #eeeeee;
}

/* 通用阴影-down */
.fx-shadow-down {
    box-shadow:2px -2px 6px $fxBorder;
}

/* 通用阴影伪元素-down */
.fx-shadow-down-pseudo {
    &::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        box-shadow: -4px 4px 2px rgb(198 198 198 / 33%);
        content: "";
    }
}

/* 通用阴影-up */
.fx-shadow-up {
    box-shadow:0 -2px 2px $fxBorder;
}

/* 通用阴影伪元素-up */
.fx-shadow-up-pseudo {
    position: relative;
    &::before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 2px;
        box-shadow: $fx-box-shadow-bottom;
        content: "";
    }
}

/* 省略号 */
.fx-ellipsis {
    overflow:hidden;
    text-overflow : ellipsis;
    white-space:nowrap;
}

/* 待办标记 */
.fx-red-dot {
    &::after {
        position: absolute;
        top: 0;
        right: 5px;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background-color: #ff4444;
        content: " ";
    }
}

/* 边框无圆角 */
.fx-no-radius {
    border-radius:0 !important;
}

/* 伪按钮 */
.fx-Pseudo-btn {
    &::after {
        position: absolute;
        background-color: #cccccc;
        opacity: 0;
        content: " ";
        inset:0;
    }
    &:active::after {
        opacity: .4;
    }
}

/* 蓝色竖线小标题 */
.fx-block-title::before {
    display: inline-block;
    margin-right: 11px;
    margin-left: 5px;
    width: 5px;
    height: 20px;
    border-radius: 2px;
    background-color: $fxDefaultColor;
    content: "";
    vertical-align: text-top;
}

/* 自定义滚动条 */
.fx-custom-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #f5f5f5;
}
.fx-custom-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #cccccc;
    box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
}
.fx-custom-scroll::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #f5f5f5;
    box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
}

/* bottom-line */
.fx-bottom-line {
    position: relative;
    &::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        margin: 0 20px;
        height: 1px;
        border-bottom: 1px solid $fxBorder;
        content: "";
    }
}

/* cursor */
.fx-cursor {
    cursor: pointer;
}

/* dialog 标题样式 */
.fx-common-dialog-title {
    display: flex;
    align-items: center;
    height: 32px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #eeeeee;
    line-height: 32px;
    &::before {
        display: inline-block;
        margin-right: 5px;
        margin-left: 5px;
        width: 3px;
        height: 16px;
        border-radius: 2px;
        background-color: #538ffd;
        content: "";
        vertical-align: text-top;
    }
}

/* 必填标记 */
.fx-common-require-icon {
    &::before {
        position: relative;
        top: 4px;
        margin-right: 5px;
        margin-left: 5px;
        width: 3px;
        height: 16px;
        font-size: 20px;
        color: #ff5331;
        content: "*";
    }
}